<script setup lang="ts">
import dayjs from "dayjs";
import {UserModel} from "@/interfaces/apiResponse.ts";
const {user} = defineProps<{
    user:UserModel
}>()
</script>

<template>
  <div class="top">
    <el-avatar shape="square" class="border-4 border-pink-600" :size="180" :src="user?.avatar" />
    <div class="items">
      <span><icon-me fill="#50e3c2"/>{{user.name}}</span>
      <span><icon-timer fill="#f5a623"/>{{dayjs(user.created_at).fromNow()}}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
div.top{
  @apply flex flex-col justify-center items-center border-b border-b-amber-600;
  div.items{
    @apply flex gap-3 justify-center items-center p-2 text-slate-600;
    span{
      @apply flex gap-1 justify-center items-center;
    }
  }
}
</style>